<template>
    <div class="home">
        <ul style="display: flex;">
            <li v-for="item in movieList" :key="item.id" style="width: 300px;list-style: none;background: pink;padding: 10px;margin: 20px;">
                <p>{{item.id}}</p>
                <p>{{item.name}}</p>
                <img :src="item.img_url" width="90" alt=""><br>
                <input type="text" :value="item.visit_link" style="width: 100%;">
                <p style="width: 200px;height: 100px;margin: 0 auto;overflow: auto">{{item.intro}}</p>
                <p>{{item.create_time}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    //api
    import {getList} from '../api/moive'

    export default {
        name: 'Home',
        data() {
            return {
                movieList: []
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                getList().then(res => {
                    console.log(res);
                    this.movieList = res;
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>
